<template>
  <el-tooltip
    class="item"
    effect="dark"
    content="切换主题"
    placement="left-start"
    v-if="themechangeif"
  >
    <transition name="fade-scale">
      <div
        id="themechange"
        :style="themechangestyle"
        v-if="themechangeif"
        @click="themechange()"
      >
        
        <img v-if="islight" src="@/assets/img/icon/sun.svg" />
		<img v-else src="@/assets/img/icon/moon.svg" />
        <div id="themechangeText"><slot name="themechangeText"></slot></div>
      </div>
    </transition>
  </el-tooltip>
</template>

<script>
	export default{
		name:'changetheme',
		data() {
			return{
				islight:false,
			}
		},
		props:{
			width:{
				type:Number,
				default:40,
			},
			height:{
				type:Number,
				default:40,
			},
			backcolor:{
				type:String,
				default:'#f7f9fa'
			},
			color:{
				type:String,
				default:'#000000'
			}
		},
		methods:{
			themechange(){
				this.islight=!this.islight
				let theme=this.islight?'light':'dark'
                window.document.documentElement.setAttribute('theme',theme);
			}	
		},
		computed:{
			themechangestyle(){
				return{height:this.height+'px',width:this.width+'px',backgroundColor:this.backcolor,color:this.color}
			},
            themechangeif(){
                if(this.$route.path.indexOf('flie')!=-1||this.$route.path.indexOf('project')!=-1){
					return true
				}
                else{
                    return false
                }
            }
		},
		watch:{
            
		}
	}
</script>

<style lang="scss" scoped>
#themechange {
  border-radius: 5px;
  box-shadow: 1px 1px 3px gray;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #e5e9ef;
}
#themechange img {
  width: 50px;
  height: 30px;
}
#themechangeText {
  font-weight: bolder;
  font-size: 14px;
}
#themechange:hover {
  opacity: 0.5;
}
</style>